<template>
    <div style="background: #fff" class="comments-container">
        <div class="main-title">
            <span>评价 {{total}}</span>
        </div>
        <div class="comment" v-show="list.length">
            <van-list
                
                ref="listRef"
                :finished="finished"
                :finished-text="'评价到底了~'"
                :offset="20"
            >
                <div class="comment-item" v-for="(item) in list" :key="item.userId">
                    <img class="avatar" :src="item.icon" alt="">
                    <div class="info">
                        <span class="name">{{item.userName}}</span>
                        <span class="rate">
                            <van-rate
                                v-model="item.score"
                                :size="16"
                                color="#ffd21e"
                                void-icon="star"
                                void-color="#eee"
                                readonly 
                                allow-half
                            />
                            <span class="num">{{item.score}}</span>
                        </span>
                        <p class="content">
                            <text-overflow :info="item.comment || ''" :lineClamp="3" :lineHeight="22"/>
                        </p>
                        <span class="time">{{dealDynamicTime(item.submitTime)}}</span>
                    </div>
                </div>
            </van-list>
        </div>
        <div class="no-data" v-show="!list.length">
            <empty :image="require('@/assets/images/empty/no-comment.png')" addTip="暂无学员评价" :size="[260, 160]"/>
        </div>
    </div>
</template>

<script setup>
// import Comment from '@/components/comment/comment';
import TextOverflow from '@/components/text-fold.vue'
import CommentInput from '@/components/comment-input/comment-input';
import { preview } from '@yanxiu/player';
import { onMounted, reactive, ref, computed, watch, onBeforeUnmount } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import {dealDynamicTime, Throttle} from '@/lib/tools'
import Empty from '@/components/empty.vue'
const props = defineProps({
    data: {
        default: () => {},
        type: Object
    },
    list: {
        default: () => [],
        type: Array
    },
    finished: {
        default: false,
        type: Boolean
    },
    loading: {
        default: false,
        type: Boolean
    },
    total: {
        default: 0,
        type: Number
    },
    page: [Number, String]
});
const listRef = ref()
// watch(() => props.loading, (val) => {
//     console.log(val, 'avl')
//     console.log(listRef.value, 'listRef')
// },{immediate: true})
const emit = defineEmits(['to-reply', 'load-data',]);
const route = useRoute();
const store = useStore();

function onLoadComments() {
    emit('load-data', props.page + 1)
}
const handleScroll = Throttle(function(e) {
    console.log(props.finished, props.loading)
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    let clientHeight = document.documentElement.clientHeight;
	let scrollHeight = document.documentElement.scrollHeight;
    if ((scrollTop + clientHeight >= scrollHeight - 20) && !props.finished && !props.loading) {
        onLoadComments()
    }
}, 100)
onMounted(() => {
    window.addEventListener('scroll', handleScroll, true);
})
onBeforeUnmount(() => {
    window.removeEventListener('scroll', handleScroll);
})
</script>
<style lang="scss" scoped>

.comments-container{
    padding: 20px 15px;
    box-sizing: border-box;
    height: auto;
    overflow: auto;
}
.main-title{
    font-size: 16px;
    font-weight: 600;
    color: #171A1D;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .icon{
        width:16px;
        height:16px;
        margin-right: 4px;
    }
}
.comment{
    height: auto;
    overflow-y: scroll;
    // margin-top: 15px;
}
.comment-item{
    display: flex;
    align-items: flex-start;
    padding-top: 15px;
    
    .avatar{
        width:34px;
        height:34px;
        margin-right: 8px;
        border-radius: 50%;
    }
    .info{
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        flex: 1;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;

        .name{
            font-size: 14px;
            font-weight: 400;
            color: #6E7074;
        }
        .rate{
            margin: 9px 0;
            .num{
                margin-left: 6px;
                font-size: 14px;
                font-weight: 600;
                color: #171A1D;
            }
        }
        .content{
            font-size: 14px;
            font-weight: 400;
            color: #171A1D;
            word-break: break-all;
        }
        .time{
            font-size: 13px;
            font-weight: 400;
            color: #A2A3A4;
            margin-top: 4px;
        }
    }
}
</style>
